<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8" />
    <style>
        #main1{
            margin: auto;

        }
    </style>

    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/js/echarts.js}"></script>
    <script th:src="@{/js/Chart.js}"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->  
    <div id="main1" style="width: 900px;height:400px;"></div>
<script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));
    /*var myChart2 = echarts.init(document.getElementById('main2'));*/
    // 指定图表的配置项和数据
    var app ={title : '环形图'};
    option1 = {
        backgroundColor: '#fefefe',
        title: {
            text: '贷款形式占比',
            left: 'center'
        },
    tooltip: {
        trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
             x: '75% ',
             y:'35%',
            data:['个人信用','个人抵押','个人分期','企业信用','企业租赁']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:1520,name:'个人信用'},
                {value:310, name:'个人抵押'},
                {value:234, name:'个人分期'},
                {value:135, name:'企业信用'},
                {value:1548,name:'企业租赁'}
            ]
        }
    ]
    };
    myChart1.setOption(option1);
    $(function () {
        $.ajax({
            "url": "/jh/qryMonryNumTwo",
            "type": "get",
            "data": {},
            "datetype": "JSON",
            "success": function (data) {
                option1.series.data =[data];
                myChart1.setOption(option1);
                console.log(option1.series)
            }
        })
    });
    </script>
</body>
</html>